<template>
    <div class="listen-container" :class="{'f-height': popup}">
        <ul class="listen-nav">
            <li :class="{'selected': curIndex==index}" @click="searchBook(item, index)" v-for="(item, index) in result" :key="index">{{item.name}}</li>
            <li class="more" @click="clickMore">更多</li>
            <mt-popup
                v-model="popup"
                position="top">
            </mt-popup>
        </ul>
        <div class="more-body" v-show="popup">
            <div :class="{'selected': subIndex==index}" v-for="(item, index) in result.slice(1)" @click="searchBook(item, index, true)" :key="index">{{item.name}}</div>
        </div>
        <div class="book-list">
            <book-box :bookList="bookList"></book-box>
        </div>
        <router-link class="search-btn" to="/searchbook" tag="div"></router-link>
    </div>
</template>
<script>
import bookBox from './bookBox.vue'
import { post } from '../../../../util/http.js'
import {Toast, Popup} from 'mint-ui'
export default {
    components: {
        bookBox,
        Popup
    },
    data () {
        return {
            bookList: [],
            curIndex: 0,
            result: [{
                id: '',
                name: '全部'
            }],
            popup: false,
            haveAll: true,
            subIndex: null,
            pageNum: 1,
            catId: ''
        }
    },
    created () {
        this.getBook()
        window.onscroll = function () {
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
            var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
            if (scrollT >= scrollH - clientH && this.haveAll) {
                this.pageNum++
                this.getSearchBook()
            }
        }.bind(this)
    },
    watch: {
        
    },
    methods: {
        getBook () {
            post('http://dhapi3.rz158.com/mindCategory/getAllMindCategoryV3', {
                type: 4
            }).then(res => {
                if(res.code == 0) {
                    this.result = this.result.concat(res.result)
                    this.catId = Number(this.result[0].id)
                    this.getSearchBook()
                }
            })
        },
        searchBook(item, index, sub) {
            if(sub) {
                this.curIndex = 1
                const r = this.result.splice(index+1, 1)[0]
                this.result.splice(1, 0, r)
                this.popup = false
            } else {
                this.curIndex = index
            }
            this.catId = Number(item.id)
            this.bookList = []
            this.pageNum = 1
            this.getSearchBook()
        },
        getSearchBook() {
            post('http://dhapi3.rz158.com/mindMain/getCatetoryListByCodition', {
                page: this.pageNum,
                pagesize: 10,
                catetory: ~~this.catId === 0 ? '' : this.catId
            }).then(res => {
                if(res.code == 0) {
                    this.bookList = this.bookList.concat(res.result)
                } else {
                    Toast({
                        message: res.message,
                        duration: 1000
                    })
                }
            })
        },
        clickMore() {
            this.popup = true
        }
    }
}
</script>

<style lang="less" scoped>
    .listen-container {
        // height: 100%;
        overflow: auto;
        /deep/ .v-modal {
            top: 36px;
        }
        .listen-nav {
            height: 0.7rem;
            font-size: 0.3rem;
            color: #707070;
            white-space: nowrap;
            overflow-x: auto;
            width: 100%;
            position: fixed;
            background: #fff;
            padding-left: 0.3rem;
            border-bottom: 1px solid #ccc;
            li {
                display: inline-block;
                margin: 0 0.25rem;
                text-align: center;
                line-height: 0.7rem;
                height: 0.65rem;
            }
            .selected {
                color: #29abae;
                border-bottom: 3px solid #29abae;
            }
        }
        .search-btn {
            width: 1.02rem;
            height: 1.02rem;
            background: url(../../../assets/img/search-icon.png) no-repeat;
            background-size: 100%;
            position: fixed;
            bottom: 0.45rem;
            right: 0.45rem;
        }
        .more{
            position: fixed;
            right: 0;
            background: #fff;
            margin: 0!important;
            width: 1rem;
            color: #29abae;
        }
        .more-body {
            z-index: 3000;
            background: #fff;
            position: absolute;
            min-height: 3rem;
            padding: 10px 2%;
            font-size: .3rem;
            margin-top: .71rem;
            div {
                font-size: 0.28rem;
                margin: 5px;
                border: 1px solid #e4e3e3;
                padding: 3px 5px;
                border-radius: 3px;
                display: inline-block;
            }
            .selected {
                color: #29abae;
                border: 1px solid #29abae;
            }
        }
        .book-list {
            padding-top: 36px;
        }
    }
    .f-height {
        height: 100%;
    }
</style>
